/* 
hooks特点：
    1. 必须是一个函数
    2. use开头
    3. hooks只能在函数式组件中使用
    4. hooks必须有返回值
*/
//解构 useState
import react, { useState } from "react";
// console.log(react);
function Home() {
    // 使用useState 创建 状态

    /* useState 得到的是一个数组  数组中的第1项为: 初始状态 
                                 第2项为:      修改状态的方法  */
    let [num, setNum] = useState(100);
    let [msg, setMsg] = useState('好好学西')
    let [list, setList] = useState(['张安', '王五', '小六']);
    let [user, setUser] = useState({
        name: '张三',
        age: 18
    })
    let [isShow, setShow] = useState(true)
    let add = () => {
        num++;
        setNum(num);
    }
    let changeMsg = () => {
        setMsg('学学学学学，别学了')
    }
    // useState 对于引用数据类型 改变状态 需要先深拷贝一下 才可以更新视图  (改变地址 才能更改数据)

    let addUser = () => {
        let newList = [...list];
        newList.push('我是小七')
        // list.push('我是小七');
        setList(newList)
    }
    return (
        <div>
            <h5>useState-hooks--基本文件</h5>
            <h1>{num}</h1>
            <button onClick={add}>++</button>
            <h1>{msg}</h1>
            <button onClick={changeMsg}>点击按钮更换</button>

            <ol>
                {
                    list.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ol>
            <button onClick={addUser}>添加用户</button>

            <h1>{user.name}------{user.age}</h1>

            <button onClick={() => {
                // 先拷贝一下
                let newUser = { ...user };
                newUser.name = '李四'
                // user.name = '李四';
                setUser(newUser)
            }}>改变user用户</button>

            {
                isShow && <h1>{msg}</h1>
            }

            <h1>{msg}</h1>
            <button onClick={() => {
                isShow = !isShow;
                setShow(isShow)
            }}>切换（显示隐藏）</button>


            {/* 
            1、 先定义一个控制显示隐藏的状态 （类型应该为布尔值）
            */}
        </div>
    )
}


export default Home;